
<!DOCTYPE html><html>
<style>    
body {        height: 100vh;        width: 100vw;    }    
#pic1 {        position: absolute;        width: 100vw;        height: 100vh;        background-color: #333;    }    
.pot{        position: absolute;        width:10px;height:10px;        background-color: #fff;        border-radius:99px;        z-index:20;    }    
.arr{        position: absolute;        width:5px;height:5px;        background-color: #09f;        border-radius:99px;        z-index:20;    }
</style>

<body id="body">
	<canvas id="pic1" width="500" height="668"></canvas>
	<script>
		var body = document.getElementById('body');
		var canvas = document.getElementById('pic1');
		var ctx = canvas.getContext('2d');
		var page = document.getElementById('pic1');    
		canvas.width = 500;    
		canvas.height = 668;    
		screen_center_x = canvas.width / 2;    
		screen_center_y = canvas.height / 2;    
		a_y=canvas.height;
		var phtml="";
		var max_anchors = 10;
		var anchors_padding = canvas.height / (max_anchors/2);
		var pots=[];
		var cpots={};
		for(var i=0;i<max_anchors;i++){
			var X=0;
			if(i==0&&i==max_anchors-1)            
				X = screen_center_x;
			else
				X = Math.floor( canvas.width/2 + Math.cos(i) * (canvas.width/8) - Math.cos(i) * i );        
			//X=Math.round(canvas.width/4+Math.random()*(canvas.width/4));        
			pots.push(new loc( X ,a_y));       
			phtml+='<div class="pot" style="left:'+ Math.round(Math.random()*(canvas.width)) + 'px;top:' + a_y+'px"></div>';        
			a_y -= anchors_padding-Math.cos(i)*15;    
		}    
		ctx.beginPath();    
		ctx.moveTo(pots[0].x, pots[0].y);    
		ctx.strokeStyle = "#fff";    
		ctx.lineWidth=6;
		for (i = 1; i < pots.length - 2; i ++) {
			var xc = (pots[i].x + pots[i + 1].x) / 2;
			var yc = (pots[i].y + pots[i + 1].y) / 2;        
			ctx.quadraticCurveTo(pots[i].x, pots[i].y, xc, yc);    
		}    
		ctx.quadraticCurveTo(pots[pots.length - 2].x, pots[pots.length - 2].y, pots[pots.length - 1].x, pots[pots.length - 1].y);    
		ctx.stroke(); 
		//body.innerHTML+=phtml;    
		//console.log(JSON.stringify(pots))
		function loc(x,y){
			this.x=x;this.y=y;
		}
	</script>
</body>
</html>